<template>
  <van-nav-bar
      title="题库"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
  <div class="content">
    <van-tabs v-model:active="activeName">
      <van-tab title="数学" name="a">
        <div class="container">
          <div class="header">
            <div class="user-info">
              <img :src="users.imageUrl" alt="Avatar" class="user-avatar" />
            </div>
            <div class="info">
              <div class="name">每日一练</div>
              <div class="stats">
                <div class="stat">
                  <div class="value">{{todayQuestions}}</div>
                  <div class="label">今日做题</div>
                </div>
                <div class="stat">
                  <div class="value">{{questions}}</div>
                  <div class="label">累计做题</div>
                </div>
                <div class="stat">
                  <div class="value">{{clickInUsers.nums}}</div>
                  <div class="label">学习天数</div>
                </div>
              </div>
            </div>
          </div>
          <div class="content">
            <van-cell-group>
              <van-cell title="历年真题" @click="router.push('/rightQuestions')" />
              <van-cell title="错题本"  @click="router.push('/errorQuestions')"/>
              <van-cell title="收藏夹"  @click="router.push('/collectQuestions')"/>
            </van-cell-group>
          </div>
        </div>

      </van-tab>
      <van-tab title="语文" name="b">
        <div class="container">
          <div class="header">
            <div class="user-info">
              <img :src="users.imageUrl" alt="Avatar" class="user-avatar" />
            </div>
            <div class="info">
              <div class="name">每日一练</div>
              <div class="stats">
                <div class="stat">
                  <div class="value">56</div>
                  <div class="label">作题数</div>
                </div>
                <div class="stat">
                  <div class="value">280</div>
                  <div class="label">累计时长</div>
                </div>
                <div class="stat">
                  <div class="value">{{clickInUsers.nums}}</div>
                  <div class="label">学习天数</div>
                </div>
              </div>
            </div>
          </div>
          <div class="content">
            <van-cell-group>
              <van-cell title="历年真题" is-link @click="handleClick('历年真题')" />
              <van-cell title="模拟题" is-link @click="handleClick('错题本')" />
              <van-cell title="收藏夹" is-link @click="handleClick('收藏夹')" />
            </van-cell-group>
          </div>
        </div>
      </van-tab>
      <van-tab title="英语" name="c">
        <div class="container">
          <div class="header">
            <div class="user-info">
              <img :src="users.imageUrl" alt="Avatar" class="user-avatar" />
            </div>
            <div class="info">
              <div class="name">每日一练</div>
              <div class="stats">
                <div class="stat">
                  <div class="value">56</div>
                  <div class="label">今日做题数</div>
                </div>
                <div class="stat">
                  <div class="value">23</div>
                  <div class="label">做题总数</div>
                </div>
                <div class="stat">
                  <div class="value">{{clickInUsers.nums}}</div>
                  <div class="label">学习天数</div>
                </div>
              </div>
            </div>
          </div>
          <div class="content">
            <van-cell-group>
              <van-cell title="历年真题"  @click="router.push('/rightQuestions')" />
              <van-cell title="模拟题" is-link @click="handleClick('模拟题')" />
              <van-cell title="收藏夹" is-link @click="handleClick('收藏夹')" />
            </van-cell-group>
          </div>
        </div>
      </van-tab>
      <van-tab title="政治" name="d">    <div class="container">
        <div class="header">
          <div class="user-info">
            <img :src="users.imageUrl" alt="Avatar" class="user-avatar" />
          </div>
          <div class="info">
            <div class="name">每日一练</div>
            <div class="stats">
              <div class="stat">
                <div class="value">56</div>
                <div class="label">作题数</div>
              </div>
              <div class="stat">
                <div class="value">280</div>
                <div class="label">累计时长</div>
              </div>
              <div class="stat">
                <div class="value">{{clickInUsers.nums}}</div>
                <div class="label">学习天数</div>
              </div>
            </div>
          </div>
        </div>
        <div class="content">
          <van-cell-group>
            <van-cell title="历年真题" is-link @click="handleClick('历年真题')" />
            <van-cell title="模拟题" is-link @click="handleClick('模拟题')" />
            <van-cell title="收藏夹" is-link @click="handleClick('收藏夹')" />
          </van-cell-group>
        </div>
      </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
const active =ref('0')
const activeName = ref('a');
const onClickLeft = () => history.back();

import { useRouter } from 'vue-router'
import {get} from "../../util/request.js";
import {showToast} from "vant";

const router = useRouter()


const users =ref([])
const clickInUsers =ref([])
const questions=ref([])
const todayQuestions=ref([])
onMounted(async () => {
  get("user/getUser").then(r => {
    if (r.code == 0) { // 获取成功
      // alert("查询成功")
      users.value = r.data;
    } else {
      showToast("查询失败")
      // 加载状态结束
    }
  }).catch(function () {
    alert("用户信息查询异常")
  });

  get("home/topics/getTopics").then(r => {
    if (r.code == 0) { // 获取成功
      // alert("查询成功")
      showToast("学习天数查询成功")
      clickInUsers.value = r.data;
    } else {
      showToast("查询失败")
      // 加载状态结束
    }
  }).catch(function () {
    alert("打卡信息查询异常")
  })
  //今日做题数
  get("home/examLog/todayQuestions").then(r => {
    if (r.code == 0) { // 获取成功
      // alert("查询成功")
      todayQuestions.value = r.data;
    } else {
      showToast("查询失败")
      // 加载状态结束
    }
  }).catch(function () {
    alert("打卡信息查询异常")
  })
//  做题总数
  get("home/examLog/questions").then(r => {
    if (r.code == 0) { // 获取成功
      // alert("查询成功")
      questions.value = r.data;
    } else {
      showToast("查询失败")
      // 加载状态结束
    }
  }).catch(function () {
    alert("打卡信息查询异常")
  })


})


</script>

<style scoped>
.info .stats {
  display: flex;
  justify-content: space-between;
  margin-top: 10px; /* 添加间距 */
}

.info .stat {
  text-align: center;
  margin: 0 10px; /* 添加间距 */
}

.info .stat .value {
  font-size: 20px;
  font-weight: bold;
}

.info .stat .label {
  font-size: 12px;
}
.content {
  padding: 20px;
}
.container {
  padding: 16px;
}
.header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 16px;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info .name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}
.stats {
  display: flex;
  justify-content: space-between;
}
.stat .value {
  font-size: 16px;
  font-weight: bold;
}
.stat .label {
  font-size: 14px;
  color: #666;
}
.user-info {
  display: flex;
  align-items: center;
  font-style: italic;
  color: #999;
  margin-bottom: 10px;

.user-avatar {
  width: 40px; /* 调整头像大小 */
  height: 40px;
  border-radius: 50%; /* 圆形头像 */
  display: block;
  margin-bottom: 10px;
}

}
</style>